<template>
  <template v-if="chartEditStore.componentList.length">
    <div
      class="chart-item"
      v-for="(item, index) in chartEditStore.componentList"
      :class="animationsClass(item.styles.animations)"
      :key="item.id"
      :style="{
      ...getComponentAttrStyle(item.attr, index),
      ...getTransformStyle(item.styles),
      ...getStatusStyle(item.status),
      ...getPreviewConfigStyle(item.preview),
      ...getBlendModeStyle(item.styles) as any,
      ...getSizeStyle(item.attr),
      ...getPriviteStyle(item)
    }"
    >
      <!-- 分组 -->
      <preview-render-group
        v-if="item.isGroup"
        :groupData="(item as CreateComponentGroupType)"
        :groupIndex="index"
        :themeSetting="themeSetting"
        :themeColor="themeColor"
      ></preview-render-group>

      <!-- 单组件 -->
      <component
        v-else
        :is="item.chartConfig.chartKey"
        :id="item.id"
        :chartConfig="item"
        :themeSetting="themeSetting"
        :themeColor="themeColor"
        :style="{
          ...getSizeStyle(item.attr),
          ...getFilterStyle(item.styles)
        }"
        v-on="useLifeHandler(item)"
      ></component>
    </div>
  </template>
  <template v-else>
    <div class="no-data">
      <div>
        <img src="@/assets/images/Error.svg" alt="" />
        <p>暂无内容</p>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
import { PropType, computed, onMounted } from 'vue'
import { useChartDataPondFetch } from '@/hooks'
import { ChartEditStorageType } from '../../index.d'
import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
import { CreateComponentGroupType } from '@/packages/index.d'
import { chartColors } from '@/settings/chartThemes/index'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
import {
  getSizeStyle,
  getComponentAttrStyle,
  getStatusStyle,
  getPreviewConfigStyle,
  getPriviteStyle
} from '../../utils'
import { useLifeHandler } from '@/hooks'

// 初始化数据池
const { initDataPond, clearMittDataPondMap } = useChartDataPondFetch()
const chartEditStore = useChartEditStore()

// const props = defineProps({
//   localStorageInfo: {
//     type: Object as PropType<ChartEditStorageType>,
//     required: true
//   }
// })

// 主题色
const themeSetting = computed(() => {
  const chartThemeSetting = chartEditStore.editCanvasConfig.chartThemeSetting
  return chartThemeSetting
})

// 配置项
const themeColor = computed(() => {
  const colorCustomMergeData = colorCustomMerge(chartEditStore.editCanvasConfig.chartCustomThemeColorInfo)
  return colorCustomMergeData[chartEditStore.editCanvasConfig.chartThemeColor]
})

// 组件渲染结束初始化数据池
clearMittDataPondMap()
onMounted(() => {
  initDataPond(useChartEditStore)
})
</script>

<style lang="scss" scoped>
.chart-item {
  position: absolute;
}
.no-data {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    height: 50vh;
  }
  p {
    color: #666;
    font-size: 1.2vw;
    text-align: center;
  }
}
</style>
